<template>
	<view>
		<!-- 自定义导航栏 -->
		<view class="navBarBox">
			<!-- 状态栏占位 -->
			<view :style="{ paddingTop: statusBarHeight + 'px' }"></view>
			<!-- 真正的导航栏内容 -->
			<view class="navBar">
				<view class="fanhui" @click="fanHui">
					<image class="zjt" src="/static/左箭头.png" mode=""></image>
				</view>
				<view class="grzx">我的订单</view>
			</view>
		</view>
		<view class="main">
			<!-- 选项卡 -->
			<view class="tabs">
				<text :class="['tab', activeTab === 'processing' ? 'active' : '']"
					@click="switchTab('processing')">进行中</text>
				<text :class="['tab', activeTab === 'completed' ? 'active' : '']"
					@click="switchTab('completed')">已完成</text>
			</view>

			<!-- 筛选条件 -->
			<view class="filter">
				<view class="wxfs">
					<text class="filter-item">维修方式：</text>
					<uni-data-select class="xlk" v-model="value" :localdata="range" @change="change"
						:clear="false"></uni-data-select>
				</view>
				<view class="yyrq">
					<image src="" mode="" @click="toggle('center')" @maskClick="handleMaskClick"
						@close="handleClose"></image>
					<text class="filter-item">预约日期</text>
				</view>
			</view>

			<!-- 维修单列表 -->
			<view class="order-list">
				<navigator v-for="(order, index) in filteredOrders" :key="index" class="order-item"
					:url="`/packageMy/fixDetail/fixDetail?id=${order.id}`">
					<view class="order-header">
						<view class="order-item-font1">
							维修单号：<text class="order-item-font2">{{ order.id }}</text>
						</view>
						<text class="order-status">{{ order.type }}</text>
					</view>
					<view class="order-detail">
						<view class="order-item-font1">
							维修方式：<text class="order-item-font2">{{ order.method }}</text>
						</view>
					</view>
					<view class="order-detail">
						<view class="order-item-font1">
							预约日期：<text class="order-item-font2">{{ order.date }}</text>
						</view>
					</view>
				</navigator>
			</view>
		</view>
		<view>
			<!-- 普通弹窗 -->
			<uni-popup ref="popup" background-color="#fff">
				<view class="start">
					<text>开始时间</text>
					<picker mode="date" :value="startDate" @change="bindStartDateChange">
						<view class="uni-input">{{startDate}}</view>
					</picker>
					<picker mode="time" :value="startTime" @change="bindStartTimeChange">
						<view class="uni-input">{{startTime}}</view>
					</picker>
				</view>
				<view class="start">
					<text>结束时间</text>
					<picker mode="date" :value="endDate" @change="bindEndDateChange">
						<view class="uni-input">{{endDate}}</view>
					</picker>
					<picker mode="time" :value="endTime" @change="bindEndTimeChange">
						<view class="uni-input">{{endTime}}</view>
					</picker>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				startDate: currentDate, //默认开始日期
				startTime: '08:00', //默认开始时间
				endDate: currentDate, //默认结束日期
				endTime: '20:00', //默认结束时间
				value: 0,
				range: [{
						value: 0,
						text: "全部"
					},
					{
						value: 1,
						text: "到店维修"
					},
					{
						value: 2,
						text: "上门取车"
					},
				],
				// 状态栏高度
				statusBarHeight: 0,
				activeTab: 'processing', // 当前选项卡
				orders: [ // 维修单数据
					{
						id: '3535252',
						type: '进行中',
						method: '到店维修',
						date: '2022/11/10 11:00'
					},
					{
						id: '3535252',
						type: '进行中',
						method: '上门取车',
						date: '2022/11/10 11:00'
					},
					{
						id: '3535252',
						type: '已完成',
						method: '到店维修',
						date: '2022/11/10 11:00'
					}
				]
			}
		},
		//第一次加载时调用
		created() {
			//获取手机状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
		},
		computed: {
			// 根据选项卡过滤订单
			filteredOrders() {
				return this.orders.filter(order => order.type === this.activeTabName)
			},
			activeTabName() {
				return this.activeTab === 'processing' ? '进行中' : '已完成'
			}
		},
		methods: {
			handleClose() {
				// 当点击遮罩层时触发此方法
				console.log('点击了遮罩层');
			},
			handleMaskClick() {
				// 当点击遮罩层时触发此方法
				console.log('点击了遮罩层');
			},
			//日期格式化
			dateChange(date) {
				let parts = date.split('-');
				return `${parts[0]}年${parts[1]}月${parts[2]}日`;
			},
			bindStartDateChange: function(e) {
				this.startDate = this.dateChange(e.detail.value);
			},
			bindStartTimeChange: function(e) {
				this.startTime = e.detail.value;
			},
			bindEndDateChange: function(e) {
				this.endDate = this.dateChange(e.detail.value);
			},
			bindEndTimeChange: function(e) {
				this.endTime = e.detail.value;
			},
			//日期显示框
			toggle(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			// 返回上一页
			fanHui() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 切换选项卡
			switchTab(tab) {
				this.activeTab = tab
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}年${month}月${day}日`;
			}
		}
	}
</script>

<style scoped>
	.navBarBox {
		background-image: url("https://mly-demo.oss-cn-beijing.aliyuncs.com/dhlbj.png");
		background-size: contain;
		color: #fff;
		height: 400rpx;
	}

	.navBar {
		display: flex;
		justify-content: space-between;
		padding: 3rpx 20rpx;
		padding-bottom: 8rpx;
	}

	.navBarBox .navBar .zjt {
		width: 50rpx;
		height: 50rpx;
		margin: 20rpx 0 40rpx;
	}

	.navBarBox .navBar .grzx {
		margin: 20rpx 0 40rpx;
		font-size: 36rpx;
		position: absolute;
		right: 310rpx;
	}

	.main {
		padding: 0 30rpx;
		position: relative;
		bottom: 330rpx;
	}

	.container {
		padding: 20rpx;
	}


	/* 选项卡 */
	.tabs {
		display: flex;
		justify-content: space-around;
		margin: 30rpx 0;
		border-radius: 16rpx;
		padding: 20rpx;
	}

	.tab {
		font-size: 34rpx;
		color: #fff;
		padding: 20rpx 40rpx;
	}

	.tab.active {
		color: #fff;
		font-weight: bold;
		border-bottom: 4rpx solid #fff;
	}

	/* 筛选条件 */
	.filter {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
		background: #fff;
		font-size: 30rpx;
		color: #0E0E0E;
		margin-bottom: 20rpx;
		border-radius: 16rpx;
	}

	.wxfs {
		display: flex;
		align-items: center;
	}

	.xlk {
		width: 180rpx;
		text-align: center;
		border-radius: 20rpx;
		background-color: #277AF6;
	}

	.yyrq {
		display: flex;
		align-items: center;
	}

	.yyrq image {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}

	/* 订单列表 */
	.order-list {
		border-radius: 20rpx;
	}

	.order-item {
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		background: #fff;
		padding: 30rpx;
		font-size: 30rpx;
		color: #333;
	}

	.order-item:last-child {
		border-bottom: none;
	}

	.order-header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.order-item-font2 {
		color: #858585;
		margin-left: 10rpx;
	}

	.order-status {
		font-size: 28rpx;
		color: #ff5500;
	}

	.order-detail {
		display: flex;
		margin: 15rpx 0;
	}

	.start {
		width: 500rpx;
		display: flex;
		margin: 50rpx;
		justify-content: space-between;
		align-items: center;
	}

	.uni-input {
		background-color: #F2F2F2;
		padding: 10rpx 20rpx;
		height: 40rpx;
		border-radius: 30rpx;
	}
</style>